<template>
  <div id="box">
    <div class="top" style="margin-bottom: 20px;">
      <Button type="primary" @click="addOpen('adding')">新增规则+</Button>
    </div>
    <div class="center">
      <Table stripe :columns="rulesColumns" :data="rulesData" :loading="loading"></Table>
      <Modal v-model="add" width="1000" title="新增规则" :closable="false" :mask-closable="false">
        <Form ref="adding" :model="adding" :label-width="100" :rules="addRules">
          <FormItem prop="type" label="规则类型:" style="width: 250px;margin-bottom: 40px;">
            <Select v-model="adding.type" style="width: 200px">
              <Option v-for="(item,index) in typeList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="month" label="所属月份:" style="width: 250px;margin-bottom: 40px;">
            <DatePicker type="month" v-model="adding.month" format="yyyy-MM" placeholder="选择月份"
                        style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem prop="name" label="规则名称:" style="width: 250px;margin-bottom: 40px;">
            <Input v-model="adding.name" placeholder="规则名称" style="width: 200px"/>
          </FormItem>
          <FormItem prop="content" label="规则类容:" style="width: 250px">
            <div id="editorElem" v-model="adding.content" style="width:800px;"></div>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="addCancel('adding')">取消</Button>
          <Button type="primary" @click="addConfrim('adding')" :loading="addload">确定</Button>
        </div>
      </Modal>
      <Modal v-model="modify" width="1000" title="修改规则" :closable="false" :mask-closable="false">
        <Form ref="modifying" :model="modifying" :label-width="100" :rules="modifyRules">
          <FormItem prop="type" label="规则类型:" style="width: 250px;margin-bottom: 40px;">
            <Select v-model="modifying.type" style="width: 200px">
              <Option v-for="(item,index) in typeList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="month" label="所属月份:" style="width: 250px;margin-bottom: 40px;">
            <DatePicker type="month" v-model="modifying.month" format="yyyy-MM" placeholder="选择月份"
                        style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem prop="name" label="规则名称:" style="width: 250px;margin-bottom: 40px;">
            <Input v-model="modifying.name" placeholder="规则名称" style="width: 200px"/>
          </FormItem>
          <FormItem prop="content" label="规则类容:" style="width: 250px">
            <div id="editorElement" v-model="modifying.content" style="width:800px;z-index:0"></div>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="changeCancel('modifying')">取消</Button>
          <Button type="primary" @click="changeConfrim('modifying')" :loading="addload">确定</Button>
        </div>
      </Modal>
    </div>
  </div>

</template>

<script>
  import E from 'wangeditor'
  export default {
    name: "rules",
    data() {
      return {
        loading: false,
        addload: false,
        rulesColumns: [
          {
            title: '数据ID',
            align: 'center',
            key: 'id'
          },
          {
            title: '规则名称',
            align: 'center',
            key: 'ruleName'
          },
          {
            title: '所属月份',
            align: 'center',
            key: 'ruleMonth',
          },
          {
            title: '规则类型',
            align: 'center',
            key: 'ruleType',
            render: (h, params) => {
              let txt = "";
              if (params.row.ruleType === 1) {
                txt = "活动规则"
              } else if (params.row.ruleType === 2) {
                txt = "签到规则"
              }else if(params.row.ruleType === 3) {
                txt = "消费规则"
              }
              return h('div', txt);
            }
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.change(params.index)
                    }
                  }
                }, '修改信息'),
              ])
            }
          },
        ],
        rulesData: [],
        typeList: [
          {
            label: '活动规则',
            value:1,
          },
          {
            label: '签到规则',
            value:2,
          },
          {
            label: '消费规则',
            value:3,
          },
        ],
        add: false,
        modify: false,
        chan:false,
        del:false,
        adding: {
          name: '',
          type: '',
          content:'',
          month:'',
        },
        modifying: {
          name: '',
          type: '',
          content:'',
          month:'',
        },
        addRules: {
          name: [
            { required: true, message: '活动名称不能为空', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '类型不能为空', trigger: 'change',type:'number'}
          ],
          content: [
            { required: true, message: '内容不能为空', trigger: 'blur' }
          ],
          month: [
            {required: true, message: '所属月份不能为空', trigger: 'blur',type:'date'}
          ],
        },
        modifyRules: {
          name: [
            { required: true, message: '活动名称不能为空', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '类型不能为空', trigger: 'change',type:'number'}
          ],
          content: [
            { required: true, message: '内容不能为空', trigger: 'blur' }
          ],
          month: [
            {required: true, message: '所属月份不能为空',}
          ],
        },
      }
    },
    methods: {
      //获取列表
      getData() {
        this.$http.get('/signRules/list')
          .then(res => {
            if (res.data.status == 200) {
              this.rulesData = res.data.data;
            } else {
              this.$Message.error(res.data.errors.msg);
            }
          })
      },

      //添加开启
      addOpen(name){
        this.add = true;
        this.$refs[name].resetFields();
        this.editor.txt.clear();
      },

      //添加取消
      addCancel() {
        this.add = false;
      },
      //添加确认
      addConfrim(name) {
        let data = {
          ruleName: this.adding.name,
          ruleType: this.adding.type,
          ruleInfo: this.adding.content,
          ruleMonth:this.$moment(this.adding.month).format('YYYY-MM'),
        }
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.addload = true;
            this.$http.post('/signRules/add', data)
              .then(res => {
                if (res.data.status == 200) {
                  this.$Message.success(res.data.message);
                  this.addload = false;
                  this.add = false;
                  this.getData();
                  this.$refs[name].resetFields();

                } else {
                  this.$Message.error(res.data.message);
                  this.addload = false;
                  this.add = true;
                }
              })
          }
        })

      },

      //修改打开
      change(index) {
        this.modify=true;
        sessionStorage.setItem('id',this.rulesData[index].id);
        this.modifying.name=this.rulesData[index].ruleName;
        this.modifying.type=this.rulesData[index].ruleType;
        this.modifying.month=this.rulesData[index].ruleMonth;
        this.modifying.content=this.rulesData[index].ruleInfo;
        this.editor1.txt.html(this.rulesData[index].ruleInfo);
      },
      //修改取消
      changeCancel(){
        this.modify=false;
      },
      //修改确认
      changeConfrim(name){
        let id=sessionStorage.getItem('id');
        let month =this.$moment(this.modifying.month).format("YYYY-MM");
        console.log(typeof(this.modifying.month));
        let data = {
          id:id,
          ruleName: this.modifying.name,
          ruleType: this.modifying.type,
          ruleInfo: this.modifying.content,
          ruleMonth: month,
        };
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.addload = true;
            this.$http.post('/signRules/update', data)
              .then(res => {
                console.log(res);
                if (res.data.status == 200){
                  this.$Message.success(res.data.message);
                  this.addload = false;
                  this.modify=false;
                  this.getData();
                } else {
                  this.$Message.error(res.data.message);
                  this.addload = false;
                  this.modify=true;
                }
              })
          }
        })
      },

      //打开文本
      getTxt(){
        this.editor = new E('#editorElem');
        this.editor.customConfig.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'emoticon',  // 表情
          'table',  // 表格
          'code',  // 插入代码
          'undo',  // 撤销
          'redo'  // 重复
        ];
        this.editor.customConfig.onchange = (html) => {
          this.adding.content = html
        };
        this.editor.create();
      },

      //打开文本
      getTxt1(){
        this.editor1  = new E('#editorElement');
        this.editor1.customConfig.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'emoticon',  // 表情
          'table',  // 表格
          'code',  // 插入代码
          'undo',  // 撤销
          'redo'  // 重复
        ];
        this.editor1.customConfig.onchange = (html) => {
          this.modifying.content = html
        };
        this.editor1.create();
      },

    },
    mounted() {
      this.getData();
      this.getTxt();
      this.getTxt1();
    }
  }
</script>

<style>
   .w-e-menu{
     z-index: 1!important;
   }

  .w-e-text-container{
    z-index: 0!important;
  }
</style>
